<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin form Examples</title>
    <meta name="description" content="这是一个form页面">
    <meta name="keywords" content="form">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="../assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="../assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="../assets/css/admin.css">
    <script src="../assets/js/echarts.common.min.js"></script>
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    以获得更好的体验！</p>
<![endif]-->

<header class="am-topbar am-topbar-inverse admin-header">
    <div class="am-topbar-brand">
        <strong> DENSO 制品库后台管理</strong>
    </div>
</header>

<div class="am-cf admin-main">
    <!-- sidebar start -->
    <div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
        <div class="am-offcanvas-bar admin-offcanvas-bar">
            <ul class="am-list admin-sidebar-list">
                <li><a href="#"><span class="am-icon-home"></span> 当日库存</a></li>
                <li><a href="#"><span class="am-icon-sign-out"></span> 库存统计</a></li>
            </ul>
        </div>
    </div>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf">
                    <strong class="am-text-primary am-text-lg">制品库数据统计</strong>
                </div>
            </div>
            <hr>
            <div class="am-u-lg">
                <div class="am-u-lg-3">
                    <div class="am-g am-margin-top">
                        <div class="am-u-md-6 am-text-right">
                            年度
                        </div>
                        <div class="am-u-md-6">
                            <select>
                                <option>2017</option>
                                <option>2018</option>
                                <option>2019</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="am-u-lg-3">
                    <div class="am-g am-margin-top">
                        <div class="am-u-md-6 am-text-right">
                            月份
                        </div>
                        <div class="am-u-md-6">
                            <div class="am-u-md-6">
                                <select>
                                    <option>1月</option>
                                    <option>2月</option>
                                    <option>3月</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="am-u-lg-3">
                    <div class="am-g am-margin-top">
                        <!--
                        <label class="am-radio am-secondary">
                            <input type="radio" name="radio1" value="" checked="checked" data-am-ucheck checked>按年统计
                        </label>
                        <label class="am-radio am-secondary">
                            <input type="radio" name="radio1" value="" data-am-ucheck>按月统计
                        </label>
                        -->
                        <input type="radio" name="radio1" value="0" checked="checked">按年统计&nbsp;&nbsp;
                        <input type="radio" name="radio1" value="1">按月统计&nbsp;&nbsp;
                    </div>
                </div>
                <div class="am-u-lg-3">
                    <div class="am-g am-margin-top">
                        <div class="am-u-md-6 am-text-right">
                            <button type="button" class="am-btn-primary"> 统 计 </button>
                        </div>
                    </div>
                </div>
                <div class="am-u-lg am-margin-top-xl">
                    <hr>
                </div>
            </div>
            <!-- 图表展示区 -->
            <div id="main" style="width: 1000px;height:400px;"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['在库基准','MQB_B一区','MQB_B三区','C7三区','C7四区']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'在库基准',
                type:'line',
                data:[0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75]
            },
            {
                name:'MQB_B一区',
                type:'line',
                data:[1.25, 1.25, 0.75, 0.55, 0.45, 0.75, 0.85, 0.85, 0.85, 1, 1, 0.75]
            },
            {
                name:'MQB_B三区',
                type:'line',
                data:[2, 1.75, 1.75, 1.75, 1.25, 1.25, 1.25, 1, 1.25, 1.25, 1.75, 1.75]
            },
            {
                name:'C7三区',
                type:'line',
                data:[0.75, 0.85, 0.95, 0.85, 0.75, 0.55, 0.55, 0.45, 0.55, 0.75, 0.85, 0.75]
            },
            {
                name:'C7四区',
                type:'line',
                data:[0.75, 0.85, 0.85, 0.75, 0.85, 0.95, 0.85, 0.85, 0.95, 0.85, 0.95, 0.75]
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<!-- content end -->

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
   data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<footer>
    <hr>
    <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
</footer>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="../assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="../assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/app.js"></script>
</body>
</html>
